<template>
  <view class="index">
    <block v-for="(item,index) in list"
           :key="item.img_src">
      <view class="card"
            @tap="lookPhoto(item.img_src,index)">
        <image class="card-img"
               :src="item.img_src"
               mode="widthFix"></image>
        <view class="card-bottm row">
          <view class="car-title-view row">
            <text class="card-title">师大</text>
          </view>
        </view>
      </view>
    </block>

    <view class="goToTop animate__animated animate__fadeInDown"
          v-if="showGotoTop"
          @tap="goToTop">
      去顶部
    </view>
    <text v-if="!ifAll"
          class="loadMore">加载中...
    </text>
    <text v-else
          class="loadMore">已经到底了
    </text>

  </view>
</template>

<script>
import { shidaList } from "../../static/photoData/photoList";

export default {
  data() {
    return {
      refreshing: false,
      providerList: [],
      list: [],
      fetchPageNum: 1,
      showGotoTop: false,
      ifAll: false,
    };
  },
  onLoad() {
    this.getData();
  },
  onReachBottom() {
    console.log("滑动到页面底部");
    this.getData();
  },

  methods: {
    getData() {
      console.log(shidaList);
      if (this.fetchPageNum >= 2) {
        this.showGotoTop = true;
      }
      if (this.fetchPageNum * 6 > shidaList.length) {
        let tempList = shidaList.slice(0, shidaList.length);
        this.list = tempList;
        this.fetchPageNum++;
        this.ifAll = true;
      } else {
        let tempList = shidaList.slice(0, this.fetchPageNum * 6);
        this.list = tempList;
        this.fetchPageNum++;
        // console.log(this.list);
      }
    },
    lookPhoto(src, index) {
      uni.navigateTo({
        url:
          "/pages/photo/photo?src=" +
          src +
          "&nowIndex=" +
          index +
          "&type=shida",
      });
    },
    goToTop() {
      console.log("去顶部");
      uni.pageScrollTo({
        scrollTop: 0,
      });
    },
  },
};
</script>
<style>
.goToTop {
  position: fixed;
  font-size: 28upx;
  width: 100upx;
  height: 100upx;
  border-radius: 50%;
  background-color: pink;
  bottom: 20upx;
  right: 20upx;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}
</style>
